<template>
    <div class="clearfix">
        <div style="width:100%;height:100%;position:absolute;">
            <div id="mapl"></div>
        </div>
        <section class="content-header">
            <div class="title">
                首页
                <span style="padding:0 5px">></span>轨迹回放
            </div>
        </section>
        <section class="right-bar">
            <div class="col-md-12 top">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">选择车辆：</label>
                        <div class="col-sm-8">
                            <select
                                class="form-control select2"
                                style="width: 100%;"
                                v-model="queryId"
                                @change="carNoChange"
                            >
                                <option
                                    v-for="(item,index) in allcarnoData"
                                    :value="item.simno"
                                    :key="index"
                                    :selected="{'selected':index==0}"
                                >{{item.carNo}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 mid">
                <div class="col-md-12">
                    <div class="center">
                        <b>选择创建时间</b>
                    </div>
                    <div class="clearfix">
                        <label class="col-sm-3 control-label">从</label>
                        <div class="col-sm-9">
                            <div class="input-group date">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker1"
                                    v-model="this.starttime"
                                    @mousedown="selectDate1"
                                    placeholder="YYYY-MM-DD"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="clearfix" style="margin-top:10px">
                        <label class="col-sm-3 control-label">到</label>
                        <div class="col-sm-9">
                            <div class="input-group date">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker2"
                                    v-model="this.endtime"
                                    @mousedown="selectDate2"
                                    placeholder="YYYY-MM-DD"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="center">
                        <button type="button" class="btn btn-block btn-primary" @click="replay()">回放</button>
                    </div>
                </div>
            </div>
            <div class="col-md-12 opera">
                <div class="col-md-5 col-md-offset-1">
                    <i
                        class="fa fa-play-circle-o"
                        aria-hidden="true"
                        style="float:left"
                        @click="setreplaystop(true)"
                    ></i>
                    <i
                        class="fa fa-stop"
                        aria-hidden="true"
                        style="float:right"
                        @click="setreplaystop(false)"
                    ></i>
                </div>
                <div class="col-md-6" style="text-align:center">
                    <i class="fa fa-minus-circle" aria-hidden="true" @click="setreplayspeed(false)"></i>&nbsp;速度
                    <i
                        class="fa fa-plus-circle"
                        aria-hidden="true"
                        @click="setreplayspeed(true)"
                    ></i>
                </div>
            </div>
            <div class="col-md-12 bottom">
                <div style="padding-left:10px;border-bottom:1px solid #bbb;margin:0 10px">
                    <i class="fa fa-file-text" aria-hidden="true" style="font-size:24px;float:left"></i>
                    <span>明细</span>
                </div>
                <div class="box-body">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>经度</th>
                                <th>纬度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in gpshisdata" :key="item.value">
                                <td>{{item.sendtime}}</td>
                                <td>{{item.latitude}}</td>
                                <td>{{item.longitude}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="margin-top:50px;">
                        <ctrlPage :setPage="getGpshisdata" :type="type" ref="page"/>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "prev, pager, next",
            gpshisdata: [],
            total: "",
            starttime: this.GetData(),
            endtime: this.GetDateStr(0),
            allcarnoData: {},
            queryId: this.$route.query.id,
            inter: "",
            replayindex: 0,
            replayspeed: 400,
            replayflag: true,
            map: null,
            lastlongitude: null,
            lastlatitude: null
        };
    },
    components: {
        ctrlPage
    },
    mounted() {
        this.mapInit();
        this.$refs.page.getList(1);
        this.getAllcarno();
    },
    methods: {
        mapInit() {
            this.map = new EJMap("mapl", {
                layers: [{ id: "定位", display: false, visible: false }]
            });
            //alert(321);
            // map.showScalebar();
            //map.showNavigation();
        },
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd hh:ii:ss"
                })
                .on("changeDate", ev => {
                    this.starttime = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd hh:ii:ss"
                })
                .on("changeDate", ev => {
                    this.endtime = ev.target.value;
                });
        },
        getGpshisdata(pageIndex, pageSizes, callback) {
            if (this.queryId == null) {
                this.$$message({
                    message: "请选择回放车辆！",
                    type: "warning"
                });
            } else {
                this.$api.cars.home
                    .gpshisdata({
                        pageNum: pageIndex || 1,
                        pageSize: pageSizes || 5,
                        simno: this.queryId || null,
                        starttime: this.starttime || null,
                        endtime: this.endtime || null
                    })
                    .then(res => {
                        if (res.success) {
                            // console.log(res);
                            this.gpshisdata = res.data.list;
                            this.total = res.data.total;
                            callback(this.gpshisdata, this.total);
                        }
                    });
            }
        },
        getAllcarno() {
            this.$api.cars.home.allcarno().then(res => {
                if (res.success) {
                    console.log(res);
                    this.allcarnoData = res.data;
                }
            });
        },
        GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            if (m < 10) m = "0" + m;
            var d = dd.getDate();
            let h = dd.getHours();
            if (h < 10) h = "0" + h;
            let i = dd.getMinutes();
            if (i < 10) i = "0" + i;
            let s = dd.getSeconds();
            if (s < 10) s = "0" + s;
            return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
        },
        GetData() {
            var dd = new Date();
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            if (m < 10) m = "0" + m;
            var d = dd.getDate();
            return y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
        },
        carNoChange() {
            // this.$router.push({path:'replay',query:{id:thisqueryId}})
            this.$refs.page.getList(1);
        },
        replay() {
            this.clearLayer();
            this.replayCar();
            this.$refs.page.getList(1);
        },
        replayCar(playindex) {
            clearInterval(this.inter);
            this.replayindex = playindex || 1;
            if (this.replayindex * 10 > this.total) {
                return;
            }
            this.$api.cars.home
                .gpshisdata({
                    pageNum: this.replayindex,
                    pageSize: 10,
                    simno: this.queryId || null,
                    starttime: this.starttime || null,
                    endtime: this.endtime || null
                })
                .then(res => {
                    if (res.success) {
                        this.total = res.data.total;
                        var iii = 0;
                        var that = this;
                        function fn() {
                            if (that.replayflag) {
                                console.info(iii);
                                if (iii < res.data.list.length) {
                                    var plongitude =
                                        res.data.list[iii].longitude;
                                    var platitude = res.data.list[iii].latitude;
                                    var direction =
                                        res.data.list[iii].direction;
                                    var carAngle = 0;
                                    if (!!plongitude && !!platitude) {
                                        if (
                                            !!that.lastlongitude &&
                                            !!that.lastlatitude
                                        ) {
                                            that.map.addLine2GraphicsLayer(
                                                {
                                                    geom: {
                                                        paths: [
                                                            [
                                                                [
                                                                    that.lastlongitude,
                                                                    that.lastlatitude
                                                                ],
                                                                [
                                                                    plongitude,
                                                                    platitude
                                                                ]
                                                            ]
                                                        ],
                                                        spatialReference: {
                                                            wkid: 4326
                                                        }
                                                    },
                                                    symbol: {
                                                        type: "esriSLS",
                                                        style: "esriSLSSolid",
                                                        color: [
                                                            255,
                                                            48,
                                                            48,
                                                            180
                                                        ],
                                                        width: 3
                                                    }
                                                },
                                                "layer_line",
                                                false
                                            );
                                        }
                                        // carAngle=that.lineAngle( that.lastlongitude,that.lastlatitude,plongitude,platitude)
                                        that.lastlongitude = plongitude;
                                        that.lastlatitude = platitude;
                                    }
                                    that.map.addPoint2GraphicsLayer(
                                        {
                                            geom: {
                                                x: plongitude,
                                                y: platitude,
                                                spatialReference: { wkid: 4326 }
                                            },
                                            symbol: {
                                                url:
                                                    host_url +
                                                    "userConfig/symbols/symbol/car.png",
                                                height: 15,
                                                width: 24,
                                                type: "esriPMS",
                                                angle: direction + 90
                                            },
                                            attributes: res.data.list[iii],
                                            center: true
                                        },
                                        "layer_car",
                                        true
                                    );
                                    iii++;
                                    that.map.reorderLayer("layer_car", 99);
                                    that.map.reorderLayer("layer_line", 80);
                                } else {
                                    clearInterval(that.inter);
                                    that.replayindex++;
                                    that.$refs.page.getList(that.replayindex);
                                    that.replayCar(that.replayindex);
                                }
                            }
                            clearInterval(that.inter);
                            that.inter = setInterval(fn, that.replayspeed);
                        }
                        fn();
                    }
                });
        },
        setreplayspeed(f) {
            if (!!f) {
                this.replayspeed -= 200;
                if (this.replayspeed < 100) {
                    this.replayspeed = 100;
                }
            } else {
                this.replayspeed += 200;
            }
        },
        setreplaystop(f) {
            this.replayflag = !!f;
        },
        lineAngle(px1, py1, px2, py2) {
            //获取线段角度
            var diff_x = px2 - px1;
            var diff_y = py2 - py2;
            //返回角度,不是弧度
            return (360 * Math.atan(diff_y / diff_x)) / (2 * Math.PI);
        },
        clearLayer() {
            this.map.clearLayerById("layer_car");
            this.map.clearLayerById("layer_line");
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
    border-bottom: 1px solid #bbbbbb;
    padding-bottom: 15px;
    .title {
        font-weight: bolder;
    }
}
.right-bar {
    width: 400px;
    float: right;
    .center {
        text-align: center;
        padding: 14px 0;
        button {
            width: 80px;
            height: 25px;
        }
    }
    label {
        padding: 0;
        margin: 0;
    }
    .control-label {
        line-height: 25px;
        height: 25px;
    }
    .col-md-12 {
        border-radius: 5px;
    }
    .top {
        padding: 10px;
        background: #fff;
        border: 1px solid #bbb;
        label {
            text-align: right;
        }
        select {
            height: 25px;
            padding: 0;
            border-radius: 5px;
        }
    }
    .mid {
        margin-top: 7px;
        background: #fff;
        border: 1px solid #bbb;

        label {
            text-align: right;
        }
        .date input {
            height: 25px;
            padding: 0;
            padding-left: 10px;
            border-radius: 5px;
        }
        button {
            border-radius: 5px;
            border: 1px solid #bbbbbb;
            margin: 0 auto;
            padding: 0;
            background: white;
            color: black;
        }
    }
    .opera {
        padding: 10px;
        margin-top: 7px;
        background: #fff;
        border: 1px solid #bbb;

        div {
            height: 30px;
            i {
                font-size: 20px;
                line-height: 30px;
                cursor: pointer;
            }
        }
    }
    .bottom {
        padding: 20px 5px;
        margin: 7px 0;
        background: #fff;
        border: 1px solid #bbb;

        span {
            display: inline-block;
            width: 85%;
            height: 30px;
            line-height: 24px;
            margin-left: 8px;
            font-size: 14px;
        }
    }
}
.table {
    tbody {
        tr {
            td {
                padding: 5px 8px;
            }
        }
    }
}
table,
table tr th,
table tr td {
    border: 1px solid #bbbbbb;
    text-align: center;
}
</style>
